<template>
  <div class="page" @click="isTimeOut" @mousemove="isTimeOut2">
    <el-container class="container">
      <!-- header部分 -->
      <el-header>
        <top></top>
      </el-header>
      <el-container class="container2">
        <!-- aside部分 -->
        <left></left>
        <el-main>
          <!-- main部分 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import left from "../main/left";
import top from "../main/top";
export default {
  components: {
    left,
    top,
  },  
  data() {
    return {
      lastTime: null, // 最后一次点击的时间
      currentTime: null, // 当前点击的时间
      timeOut: 20* 60 * 1000, // 设置超时时间
    };
  },
  created() {
    this.lastTime = new Date().getTime();
   
  },
  methods: {
    isTimeOut() {
      this.currentTime = new Date().getTime();
      if (this.currentTime - this.lastTime > this.timeOut) {
        // 判断上次最后一次点击的时间和这次点击的时间间隔是否大于20分钟
           alert("用户长时间未操作，请重新登录！");
           localStorage.clear();
          this.$router.push({ name: "login" });
      } else {
        this.lastTime = new Date().getTime();
        // 如果在20分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
      }     
    },

    isTimeOut2() {
      this.currentTime = new Date().getTime();
      if (this.currentTime - this.lastTime > this.timeOut) {
        localStorage.clear();
      }else{
         this.lastTime = new Date().getTime();
          
      }
    },

  },
};
</script>

<style scope>
.el-main {
  
  background: none;
}

.el-header {
  width: 100%;
  background-color: #545c64;
  height: 90px  !important;
}
.el-footer {
  background-color: white;
  box-sizing: border-box;
  border-bottom: 1px solid #f5f1f1;
}
.el-container {
  height: 100%;
}
.container2 {
  box-shadow: 0 0 25px #cac6c6;
  /* border-top: 1px solid #cac6c6; */
}
</style>
